<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>商城</title>
    <meta name="viewport" content="width=device-width, initial-scale=1 ,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="static/ydui/ydui.rem.css">
    <link rel="stylesheet" href="static/css/font-awesome.min.css">
    <link rel="stylesheet" href="static/css/main.css">
    <!-- 引入rem自适应类库 -->
    <script src="static/ydui/ydui.flexible.js"></script>
</head>
<body>
<div id="app" v-cloak style="height:100%;background-color: #fff;">
    <yd-layout>
    	
    	<yd-navbar slot="navbar" title="商城">
        </yd-navbar>

        <yd-slider autoplay="3000" style="margin: 0.2rem 0;padding: 0 0.2rem;">
            <yd-slider-item v-for="img in imgs">
                <a href="#">
                    <img :src="mediaUrl+img.img" style="height: 3rem;">
                </a>
            </yd-slider-item>
        </yd-slider>

        <div class="ox-mall-row" v-for="mall in malls">
            <div class="ox-mall-row-title">
                <img :src="mediaUrl+mall.img" style="width: 0.34rem;height: 0.34rem;">
                <span class="ox-mall-name">{{mall.name}}</span>
                <span class="ox-mall-name-exp">{{mall.name_en}}</span>
            </div>
            <a class="ox-mall-desc" :href="mall.link">{{mall.description}}</a>
        </div>

        <yd-tabbar slot="tabbar" bgcolor="#f5f5f5" active-color="#37b9c7">
            <yd-tabbar-item title="TOKEN" link="index.html" type="a">
                <yd-icon name="home" slot="icon"></yd-icon>
            </yd-tabbar-item>
            <yd-tabbar-item title="商城" link="mall.html" type="a" active>
                <yd-icon name="shopcart" slot="icon"></yd-icon>
            </yd-tabbar-item>
            <yd-tabbar-item title="我的" link="center.html" type="a">
                <yd-icon name="ucenter" slot="icon"></yd-icon>
            </yd-tabbar-item>
        </yd-tabbar>

    </yd-layout>
</div>
<!-- 引入 Vue -->
<script src="static/lib/vue.min.js"></script>
<script src="static/lib/jquery.min.js"></script>
<script src="static/lib/fastclick.js"></script>
<script>
    $(function() {
        FastClick.attach(document.body);
    });
</script>
<!-- 引入组件库 -->
<script src="static/ydui/ydui.rem.js"></script>
<script src="static/js/common.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            mediaUrl:'https://oxtoken.io/media/'
            ,imgs:[]
            ,malls:[]
        },
        created:function () {
            $.getJSON(baseURL + "/api/v1/get-mall-info", function(r){
                vm.imgs = r.img;
                vm.malls = r.mall;
            });
        }
    })
</script>
</body>
</html>